<template>
  <el-dialog
    title="新增菜单"
    width="40%"
    top="2vh"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :show-close="false"
  >
    <el-form :model="menu" ref="ruleForm" :rules="rules">
      <el-form-item label="菜单类型" prop="menuType">
        <!-- <label slot="label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label> -->
        <el-radio-group v-model="menu.menuType" @change="changeRadio">
          <el-radio style="margin-left:10px" label="目录" border>目录</el-radio>
          <el-radio label="菜单" border>菜单</el-radio>
          <el-radio label="功能" border>功能</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单" v-if="catalogVisiable" prop="menuParentId">
        <el-select v-model="menu.menuParentId" placeholder="全部" class="input_width">
          <el-option
            v-for="(item,index) in menuTable"
            :key="index"
            :label="item.menuName"
            :value="item.menuId"
          ></el-option>

          <!-- <el-option value="菜单"></el-option>
          <el-option value="功能"></el-option>-->
          <el-option label="无" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="menu.menuName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item v-if="catalogVisiable && menuVisiable" label="菜单标识" prop="menuSign">
        <el-input v-model="menu.menuSign" class="input_width"></el-input>
      </el-form-item>
      <el-form-item v-if="catalogVisiable && actionVisiable" label="菜单地址" prop="menuUrl">
        <el-input v-model="menu.menuUrl" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="menuIcon">
        <el-input v-model="menu.menuIcon" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="排序号" prop="menuQueueNumber">
        <el-input type="number" v-model="menu.menuQueueNumber" class="input_width input_left"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="menuStatus">
        <el-radio-group v-model="menu.menuStatus" style="margin-left:30px">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="menuRemarks">
        <el-input type="textarea" v-model="menu.menuRemarks" :rows="4" class="text_area"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="addMenu('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  computed: {},
  data() {
    const validateType = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("菜单类型必选"));
      } else {
        callback();
      }
    };
    const validateName= (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入菜单名称"));
      } else {
        callback();
      }
    };
    return {
      catalogVisiable: true,
      menuVisiable: true,
      actionVisiable: true,
      visible: true,
      menu: {
        menuName: "",
        menuParentId: null,
        menuType: "",
        menuSign: "",
        menuUrl: "",
        menuIcon: "",
        menuQueueNumber: null,
        menuStatus: null,
        menuRemarks: "",
      },
      menuTable: [],
      rules: {
        menuName: [
         {validator: validateName },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
        menuType: [{ required: true, validator: validateType }],
      },
    };
  },
  methods: {
    changeRadio(label) {
      // console.log(label);
      if (label == "目录") {
        this.menuVisiable = true;
        this.actionVisiable = true;
        this.catalogVisiable = false;
      } else if (label == "菜单") {
        this.actionVisiable = true;
        this.catalogVisiable = true;
        this.menuVisiable = false;
      } else if (label == "功能") {
        this.catalogVisiable = true;
        this.menuVisiable = true;
        this.actionVisiable = false;
      }
    },
    cancle() {
      this.$emit("closeDialog", false);
    },
    addMenu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = new URLSearchParams();
          param.append("menuType", this.menu.menuType);

          param.append(
            "menuParentId",
            this.menu.menuParentId == undefined ? 0 : this.menu.menuParentId
          );

          param.append("menuName", this.menu.menuName);
          if (this.menu.menuSign != undefined) {
            param.append("menuSign", this.menu.menuSign);
          }
          if (this.menu.menuUrl != undefined) {
            param.append("menuUrl", this.menu.menuUrl);
          }

          if (this.menu.menuIcon != undefined) {
            param.append("menuIcon", this.menu.menuIcon);
          }
          param.append("menuQueueNumber", this.menu.menuQueueNumber);
          param.append("menuStatus", this.menu.menuStatus == "有效" ? 1 : 0);
          param.append("menuRemarks", this.menu.menuRemarks);
          const vm = this;
          vm.$http({
            method: "post",
            url: "/menu/insertMenu",
            data: param,
          }).then((res) => {
            if (res.data == 1) {
              Message({ message: "添加成功", type: "success" });
              // Side.getNavBar();
            } else {
              Message({ message: "添加失败", type: "error" });
            }
          });
          this.$emit("refreshList");
          this.$store.dispatch("findAllMenu");
          this.$emit("closeDialog", false);
        }else{
          this.$message.error("添加失败，格式验证不通过")
        }
      });
    },
  },
  created() {
    const vm = this;
    this.$http.get("/menu/getAllMenu").then((res) => {
      let menus = [];

      for (let i = 0; i < res.data.length; i++) {
        menus.push(res.data[i]);
      }
      for (let i = 0; i < menus.length; i++) {
        for (let j = menus.length - 1; j > i; j--) {
          if (menus[i].menuName == menus[j].menuName) {
            menus.splice(i, 1);
          }
        }
      }
      vm.menuTable = menus;
    });
  },
};
</script>
<style lang='less' scoped>
.input_width {
  width: 350px;
}
.input_left {
  margin-left: 15px;
}
.text_area {
  margin-left: 30px;
  width: 71%;
}
</style>